import React, { useCallback, useMemo } from "react";
import FilterModuleOrganisms from "../../UI_KIT/Organisms/FilterModule.Organisms";
import FilterModuleEnum from "../../UI_KIT/Organisms/FilterModule.Organisms/enum";
import ButtonAtom from "../../UI_KIT/Atoms/Button.Atom";
import ButtonAtomEnum from "../../UI_KIT/Atoms/Button.Atom/enum";
import { FiltersProps } from "./type";
import { useTranslation } from "react-i18next";
import TextAtom from "../../UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "../../UI_KIT/Atoms/Text.Atom/enum";
import SortSelectMolecule from "../../UI_KIT/Molecules/SortSelect.molecule";

const Filters: React.FC<FiltersProps> = (props) => {
  const { t } = useTranslation();
  const sortSortFilterSelectItems = useMemo(() => {
    return t("CatalogPage.filterModules.sortModule", {
      returnObjects: true,
    }) as [];
  }, [t]);

  const {
    filters,
    applyFilters,
    maxPrice,
    uniqueBrands,
    uniqueColors,
    clearFilters,
  } = props;

  const handleClearFilters = useCallback(() => {
    clearFilters?.();
  }, [clearFilters]);

  return (
    <div className="flex gap-3">
      <SortSelectMolecule
        items={sortSortFilterSelectItems}
        applyFilters={applyFilters}
        filters={filters}
        filterKey="sort"
      />
      <FilterModuleOrganisms
        itemTitle={t("filterOrganism.priceFilter.title")}
        filters={filters}
        applyFilters={applyFilters}
        maxPrice={maxPrice}
        type={FilterModuleEnum.enum_priceModuleFilter}
      />
      <FilterModuleOrganisms
        itemTitle={t("filterOrganism.brandsFilter.title")}
        items={uniqueBrands}
        filters={filters}
        applyFilters={applyFilters}
        filterKey="brands"
        type={FilterModuleEnum.enum_otherModuleFilter}
      />
      <FilterModuleOrganisms
        itemTitle={t("filterOrganism.colorsFilter.title")}
        items={uniqueColors}
        filters={filters}
        applyFilters={applyFilters}
        filterKey="colors"
        type={FilterModuleEnum.enum_otherModuleFilter}
      />
      {filters !== undefined && Object.keys(filters).length > 0 && (
        <ButtonAtom
          type={ButtonAtomEnum.enum_defaultButton}
          onClick={handleClearFilters}
          className="p-[8px] hover:text-peach text-textColor font-medium"
        >
          <TextAtom type={TextAtomEnum.enum_h5}>
            {t("filterOrganism.clearButton")}
          </TextAtom>
        </ButtonAtom>
      )}
    </div>
  );
};

export default React.memo(Filters);
